<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElInput, ElRadio, ElRadioGroup } from 'element-plus';
import { OPERATION_TYPE } from '@/common/common-const';

const props = defineProps({
  menuData: {
    type: Object,
  },
  menuType: {
    type: String,
  },
  menuShow: {
    type: Boolean,
  },
});
const { menuShow, menuType, menuData } = toRefs(props);
const emit = defineEmits(['handleMenuShowEmit', 'handleMenuParamEmit']);

const formRef = ref(null);
const superior = ref('');

const formInline = reactive({
  title: '',
  code: '',
  description: '',
  type: null,
});

const rules = {
  title: [
    {
      required: true,
      message: '此项为必填项',
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '此项为必填项',
      trigger: 'blur',
    },
  ],
  type: [
    {
      required: true,
      message: '此项为必填项',
      trigger: 'blur',
    },
  ],
};

const closeBoxShowDialog = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  emit('handleMenuShowEmit', false);
};

onMounted(() => {
  if (menuType.value == OPERATION_TYPE.ADD) {
    superior.value = '主类目';
    formInline.type = 1;
    if (!formRef.value) return;
    formRef.value.resetFields();
  }

  if (Object.keys(menuData.value).length) {
    superior.value = menuData.value.title;
    formInline.type = menuData.value.type == 1 ? 2 : menuData.value.type == 2 ? 3 : 4;

    if (menuType.value == OPERATION_TYPE.EDIT) {
      formInline.code = menuData.value.code;
      formInline.title = menuData.value.title;
      formInline.description = menuData.value.description;
      formInline.type = menuData.value.type;
      superior.value = menuData.value.pid ? menuData.value.title : '主类目';
    }
  }
});

const handleSubmit = () => {
  formRef.value.validate((err) => {
    if (err) {
      if (menuType.value == OPERATION_TYPE.ADD) {
        emit('handleMenuParamEmit', formInline, OPERATION_TYPE.ADD);
      }

      if (menuType.value == OPERATION_TYPE.LOOK) {
        formInline['pid'] = menuData.value.id;
        emit('handleMenuParamEmit', formInline, OPERATION_TYPE.ADD);
      }

      if (menuType.value == OPERATION_TYPE.EDIT) {
        formInline['id'] = menuData.value.id;
        formInline['pid'] = menuData.value.pid;
        emit('handleMenuParamEmit', formInline, OPERATION_TYPE.EDIT);
      }
    }
  });
};
</script>
<template>
  <div class="menu-loading">
    <ElDialog
      v-if="menuShow"
      v-model="menuShow"
      align-center="center"
      :append-to-body="false"
      :title="menuType == OPERATION_TYPE.EDIT ? '编辑' : menuType == OPERATION_TYPE.ADD ? '新建' : '添加'"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      @close="closeBoxShowDialog()"
    >
      <main>
        <ElForm ref="formRef" :rules="rules" :model="formInline" label-position="top">
          <ElFormItem label="上级菜单">
            <ElInput v-model.trim="superior" show-word-limit maxlength="50" type="text" disabled />
          </ElFormItem>
          <ElFormItem label="菜单名称" prop="title">
            <ElInput v-model.trim="formInline.title" show-word-limit maxlength="50" type="text" />
          </ElFormItem>
          <ElFormItem label="菜单标识" prop="code">
            <ElInput v-model.trim="formInline.code" maxlength="50" type="text" />
          </ElFormItem>
          <ElFormItem label="备注">
            <ElInput v-model.trim="formInline.description" maxlength="50" type="text" />
          </ElFormItem>
          <ElFormItem label="类型" prop="type">
            <ElRadioGroup v-model="formInline.type">
              <ElRadio :value="1" disabled>主目录</ElRadio>
              <ElRadio :value="2" :disabled="!Object.keys(menuData).length">系统</ElRadio>
              <ElRadio :value="3" :disabled="!Object.keys(menuData).length">菜单</ElRadio>
              <ElRadio :value="4" :disabled="!Object.keys(menuData).length">按钮</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </ElForm>
      </main>
      <div class="dialog-footer">
        <div @click="closeBoxShowDialog()">取消</div>
        <div @click="handleSubmit()">保存</div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.menu-loading {
  :deep(.el-dialog) {
    width: 700px;
    border-radius: 6px;
  }

  main {
    :deep(.el-radio__input.is-checked + .el-radio__label) {
      color: $base-color-green;
    }
  }

  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30px;
    text-align: right;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 40px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;

      &:first-child {
        color: $base-color-info;
        background-color: $base-button-background-info;
      }

      &:nth-child(2) {
        margin: 0 20px;
        color: $base-button-color-green;
        background-color: $base-button-background-green;
      }
    }
  }
}
</style>
